<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>16_伪元素选择器</title>
    <style>
        /* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        } 
        div::selection {
            background-color: greenyellow;
            color: orange;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的P元素是最开始的位置，随后创建一个子元素*/
        p::before {
            content: "$";
        }
        /* 选中的P元素是最后的位置，随后创建一个子元素*/        
        p::after {
            content: ".00";
        }
   </style>
</head>
<body>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos expedita at impedit corrupti dolorem in consequuntur vel! Illo eligendi, labore magnam modi nemo corrupti tempore, nisi incidunt, numquam eius unde.</div>
    <br>
    <input type="text" placeholder="请输入您的用户名">
    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>
</body>
</html>